<!--
 * @Date: 2024-12-18 14:02:49
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-12-18 14:49:47
 * @Description: 
-->
<template>
  <RkDialog
    ref="dialogRef"
    :="dialogAttrs"
    :visible="dialogState.visible"
    @hide="handleCancel"
  >
    <template #default>
      <div class="uploader-dialog-panel" v-loading="dialogState.uploading">
        <div class="uploader-panel">
          <rk-upload-dragger
            ref="uploaderRef"
            :accept="accept"
            :action="action"
            failedText="导入失败"
            successText="导入成功"
            @onError="handleError"
            @onSuccess="handleSuccess">
          </rk-upload-dragger>
        </div>
      </div>
    </template>
    <template #footer>
      <el-button type="primary" @click="handleConfirm">导入</el-button>
      <el-button @click="handleCancel">关闭</el-button>
    </template>
  </RkDialog>
</template>

<script setup>
import { nextTick, reactive } from 'vue';
import { RkDialog } from '@/components/dialog'
import { RkUploadDragger } from '@/components/uploader'

const props = defineProps({
  // 类型
  type: { type: String, default: 'add' },
  // 弹窗名称
  title: { type: String, default: '导入' },
  // 请求地址
  action: { type: String },
  // 文件限制类型
  accept: { type: String, default: '.xls,.xlsx' },
  // 是否可见
  visible: { type: Boolean, default: false },
  // 额外参数
  extParams: { type: Object, default: () => ({})},
  // 是否显示底部
  showFooter: { type: Boolean, default: true },
  // 错误回调
  onError: { typeL: Function },
  // 取消方法
  onCancel: { type: Function },
  // 确认方法
  onConfirm: { type: Function },
  // 成功的方法
  onSuccess: { type: Function },
  // 销毁方法
  onDestory: { type: Function },
})

// 弹窗的Ref
const dialogRef = ref(null)
// 弹窗属性配置
const dialogAttrs = reactive({
  title: props.title,
  width: '650px',
  height: '400px',
  showFooter: true,
  destroyOnClose: false,
})
const dialogState = reactive({
  visible: props.visible,
  uploading: false
})

const handleCancel = () => {
  if (props.onCancel) { props.onCancel() }
  handleDestory()
}
const handleConfirm = async () => {
  dialogState.uploading = true
  await nextTick()
  uploaderRef.value.handleUpload()
}

const handleDestory = () => {
  uploaderRef.value.handleClear()
  if (props.onDestory) { props.onDestory() }
}

const uploaderRef = ref(null)
const handleError = (data) => {
  dialogState.uploading = false
  if (props.onError) { props.onError(data) }
  handleDestory()
}
const handleSuccess = (data) => {
  dialogState.uploading = false
  if (props.onSuccess) { props.onSuccess(data) }
  handleDestory()
}
</script>

<style lang="scss" scoped>
.uploader-panel {
  height: 80%;
}
.uploader-dialog-panel {
  height: 100%;
}
</style>